<template>
  <!-- 表格页面 列表-->
  <div class="table-page-container">
    <div
      class="table-grid-page"
      :style="
        'width: 100%;' +
        (customTableHeight > 0 ? `height:calc(100vh - ${customTableHeight}px)` : '')
      "
    >
      <el-table
        ref="TablePage"
        border
        :row-key="tableRowKey"
        v-loading="loading"
        :data="getTableData"
        :height="tableHeight"
        tooltip-effect="dark"
        :style="
          'width: 100%;' +
          (customTableHeight > 0 ? `height:calc(100vh - ${customTableHeight}px)` : '')
        "
      >
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :prop="item.name"
          :label="item.title"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed ? item.fixed : false"
        >
          <template slot-scope="scope">
            <div v-if="item.customSlotScope">
              <el-tooltip
                v-if="
                  item.iconName &&
                  (!item.iconShow || item.iconShow(scope.row)) &&
                  (!item.iconPosition || item.iconPosition === 'left')
                "
                @click="item.iconClick(scope.row)"
                :class="item.iconClick ? 'btn-icon-click' : ''"
                :content="item.iconTitle"
                placement="top-start"
              >
                <span @click="item.iconClick(scope.row)">
                  <svg-icon
                    :icon-class="item.iconName"
                    :class="item.isRotate ? 'column-svg-rotate' : ''"
                    :style="`color: ${item.iconColor}};`"
                  ></svg-icon>
                </span>
              </el-tooltip>
              <div v-html="item.customSlotScope(scope.row)"></div>
              <el-tooltip
                v-if="
                  item.iconName &&
                  (!item.iconShow || item.iconShow(scope.row)) &&
                  item.iconPosition &&
                  item.iconPosition === 'right'
                "
                @click="item.iconClick(scope.row)"
                :class="item.iconClick ? 'btn-icon-click' : ''"
                :content="item.iconTitle"
                placement="top-start"
              >
                <span @click="item.iconClick(scope.row)">
                  <svg-icon
                    :icon-class="item.iconName"
                    :class="item.isRotate ? 'column-svg-rotate' : ''"
                    :style="`color: ${item.iconColor}};`"
                  ></svg-icon>
                </span>
              </el-tooltip>
            </div>
            <div v-else>
              <span
                v-if="item.select"
                :style="
                  item.optionsColor
                    ? `color: ${
                        item.optionsColor[
                          scope.row[item.name] - (item.colorIndex ? item.colorIndex : 0)
                        ]
                      };`
                    : ''
                "
              >
                <el-tooltip
                  v-if="
                    item.iconName &&
                    (!item.iconShow || item.iconShow(scope.row)) &&
                    (!item.iconPosition || item.iconPosition === 'left')
                  "
                  @click="item.iconClick(scope.row)"
                  :class="item.iconClick ? 'btn-icon-click' : ''"
                  :content="item.iconTitle"
                  placement="top-start"
                >
                  <span @click="item.iconClick(scope.row)">
                    <svg-icon
                      :icon-class="item.iconName"
                      :class="item.isRotate ? 'column-svg-rotate' : ''"
                      :style="`color: ${item.iconColor}};`"
                    ></svg-icon>
                  </span>
                </el-tooltip>
                {{ item.options[scope.row[item.name]] }}
                <el-tooltip
                  v-if="
                    item.iconName &&
                    (!item.iconShow || item.iconShow(scope.row)) &&
                    item.iconPosition &&
                    item.iconPosition === 'right'
                  "
                  :class="item.iconClick ? 'btn-icon-click' : ''"
                  :content="item.iconTitle"
                  placement="top-start"
                >
                  <span @click="item.iconClick(scope.row)">
                    <svg-icon
                      :icon-class="item.iconName"
                      :class="item.isRotate ? 'column-svg-rotate' : ''"
                      :style="`color: ${item.iconColor}};`"
                    ></svg-icon>
                  </span>
                </el-tooltip>
              </span>
              <span
                v-if="item.name === 'operate' && item.operate && item.operate.length > 0"
              >
                <span
                  v-for="(btn, index) in item.operate"
                  :key="index"
                  :style="btn.customStyle || {}"
                  v-show="
                    !btn.permission ||
                    ($btnPermission.verify(btn.permission) &&
                      (!btn.onShow || btn.onShow(scope.row, formData)))
                  "
                >
                  <span v-if="!btn.more">
                    <span v-if="btn.confirm">
                      <el-popconfirm
                        :title="btn.message"
                        @confirm="
                          btn.fun(
                            scope.row,
                            formRowId,
                            formGrid,
                            gridRefreshFun,
                            formData
                          )
                        "
                      >
                        <el-button
                          slot="reference"
                          :style="{ color: btn.color }"
                          :type="btn.type || 'text'"
                          size="small"
                          :disabled="
                            btn.onDisabled && btn.onDisabled(scope.row, formData)
                          "
                          >{{ btn.name }}</el-button
                        >
                      </el-popconfirm>
                    </span>
                    <span v-else>
                      <el-button
                        :type="btn.type || 'text'"
                        :style="{ color: btn.color }"
                        size="small"
                        @click="
                          btn.fun(
                            scope.row,
                            formRowId,
                            formGrid,
                            gridRefreshFun,
                            formData
                          )
                        "
                        :disabled="btn.onDisabled && btn.onDisabled(scope.row, formData)"
                        >{{ btn.name }}</el-button
                      >
                    </span>
                  </span>
                  <span v-else>
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        {{ btn.name }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          v-for="(dropMenu, index) in btn.more"
                          :key="index"
                          v-show="
                            !dropMenu.permission ||
                            ($btnPermission.verify(dropMenu.permission) &&
                              (!dropMenu.onShow || dropMenu.onShow(scope.row, formData)))
                          "
                          :disabled="
                            dropMenu.onDisabled &&
                            dropMenu.onDisabled(scope.row, formData)
                          "
                        >
                          <el-button
                            :type="dropMenu.type || 'text'"
                            :style="{ color: dropMenu.color }"
                            size="small"
                            @click="
                              dropMenu.fun(
                                scope.row,
                                formRowId,
                                formGrid,
                                gridRefreshFun,
                                formData
                              )
                            "
                            :disabled="
                              dropMenu.onDisabled &&
                              dropMenu.onDisabled(scope.row, formData)
                            "
                            >{{ dropMenu.name }}</el-button
                          >
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </span>
                </span>
              </span>
              <span
                v-if="
                  !item.select &&
                  item.name !== 'operate' &&
                  (!item.operate || item.operate.length <= 0)
                "
              >
                <div v-if="!item.ellipsis">{{ scope.row[item.name] }}</div>
                <div v-if="item.ellipsis" class="table-column-ellipsis">
                  <el-tooltip :content="scope.row[item.name]" placement="top">
                    <span> {{ scope.row[item.name] }} </span>
                  </el-tooltip>
                </div>
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div
      v-if="pagination.onShow"
      class="table-pagination-page"
      :class="
        pagination.position === 'center'
          ? 'el-pagination-center'
          : pagination.position === 'right'
          ? 'el-pagination-right'
          : 'el-pagination-left'
      "
      :style="`width:${pagination.width}`"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "TablePage",
  props: {
    tableRowKey: {
      type: String,
      default: () => "id",
    },
    loading: {
      type: Boolean,
      default: () => true,
    },
    tableData: {
      type: [Array, Object],
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    customTableHeight: {
      type: Number,
      default: () => 0,
    },
    formGrid: {
      type: Object,
      default: () => {},
    },
    formRowId: {
      type: [Number, String],
      default: () => null,
    },
    gridRefreshFun: {
      type: Function,
      default: () => null,
    },
    formData: {
      type: Object,
      default: () => {},
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          onShow: true,
          position: "right",
        };
      },
    },
    fixedHead: {
      type: Boolean,
      default: () => false,
    },
    page: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 20, 50, 100, 200, 300, 400],
          pageSize: 10,
          pageNumber: 1,
          total: 0,
        };
      },
    },
  },
  computed: {
    tableHeight: {
      get() {
        return this.fixedHead ? Number(window.innerHeight - 300) : null;
      },
      set() {},
    },
    getTableData: {
      get() {
        return this.tableData ? Array(...this.tableData) : [];
      },
    },
  },
  methods: {
    // 每页显示数量改变
    handleSizeChange(val) {
      console.log(window.innerHeight);
      this.page.pageSize = val;
      this.$emit("reloadData");
    },

    // 页码改变
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.$emit("reloadData");
    },
  },
};
</script>
<style lang="scss" scoped>
.table-page-container {
  flex-grow: 1;
  min-height: 0;
  width: 100%;
  margin: 0px;
  padding: 0px;

  .el-pagination-right {
    display: flex;
    justify-content: flex-end;
    margin-left: -25%;
  }

  .el-pagination-left {
    display: block !important;
  }

  .el-pagination-center {
    display: block !important;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .table-grid-page {
    overflow: scroll;

    ::v-deep .el-table {
      overflow: scroll;
      border: 1px solid #ebeef5 !important;

      .el-table__header th {
        background-color: #d9d9d9 !important;
        border: 1px solid #cccccc;
      }

      .el-table__header-wrapper {
        background-color: #d9d9d9 !important;
      }

      ::v-deep .el-table__body-wrapper .el-table__empty-block {
        width: 100% !important;
      }
    }

    .el-dropdown-link {
      color: #409eff;
      font-size: 13px;
      margin-left: 5px;
    }

    .table-column-ellipsis {
      white-space: nowrap; /* 确保文本不会换行 */
      overflow: hidden; /* 隐藏超出容器宽度的内容 */
      text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
    }
  }

  // 隐藏伪元素（表格多出的横线）
  ::v-deep.el-table::before {
    display: none !important;
  }

  .table-pagination-page {
    position: fixed;
    bottom: 25px;
    width: 100%;
  }

  .column-svg-rotate {
    animation: tableColumnSvgRotate 2s linear infinite;
  }

  @keyframes tableColumnSvgRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

.btn-icon-click:hover {
  cursor: pointer;
}
</style>
